<script lang="js" setup>
    import TopHeader from '../components/TopHeader.vue';
    import CardioAge from '../components/CardioAge.vue';
</script>
<template>
    <!--整个可视化容器-->
    <div class="data-view">
        <!--全屏容器：使用datav的组件-->
        <dv-full-screen-container>
            <!--头部标题组件:位置-->
            <div class="top-header">
                <top-header></top-header>
            </div>
            <!--数据分析模块-->
            <div class="dv_data">
                <!--第一列-->
                <div class="col">
                    <div class="row">
                        <cardio-age></cardio-age>
                    </div>
                    <div class="row"></div>
                </div>
                <!--第二列-->
                <div class="col">
                    <div class="row"></div>
                    <div class="row"></div>
                </div>
                <!--第三列-->
                <div class="col">
                    <div class="row"></div>
                    <div class="row"></div>
                </div>
            </div>
        </dv-full-screen-container>
    </div>
</template>
<style lang="css" scoped>
    /*整个可视化容器*/
    .data-view{
        width: 100vw;
        height: 100vh;
        background-color: #030409;
        color: #fff;
        position: absolute;
        top: 0;
        left: 0;
    }
    /*全屏容器 样式设置 */
    #dv-full-screen-container{
        background-image: url('@/assets/imgs/bg.png');
        background-size: 100% 100%;
        box-shadow: 0 0 3px blue;
    }
    /**头部标题组件样式 */
    .top-header{
        width: 100%;
        height: 100px;
    }
    /**数据分析模块 */
    .dv_data{
        width: 100%;
        height: 100%;
        margin-top: 10px;
        /**组件内部子组件的布局方式 */
        display: flex;
        flex: 1;
        justify-content: space-between;
    }
    /**数据分析模块-：每一列 */
    .dv_data .col{
        width: 100%;
        height: 100%;
        /**列中的布局方式 */
        flex-direction: column;
        /**组件内部子组件的布局方式 */
        display: flex;
        flex: 1;
        justify-content: space-between;
    }
    /**数据分析模块-：每一列 -每一行 */
    .dv_data .col .row{
        width: 100%;
        height: 100%;
    }
</style>